// const fs = require('fs')
// const path = require('path')
// const glob = require('glob')

// 设置不参与构建的库
const externals = {}

const plugins = []
const transpileDependencies = []
const StyleLintPlugin = require('stylelint-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')
const CompressionWebpackPlugin = require('compression-webpack-plugin')

// 拼接路径
const resolve = dir => require('path').join(__dirname, dir)

plugins.push(
  new StyleLintPlugin({
    'files': ['**/*.{html,vue,css,sass,less,scss}'],
    'fix': true,
    'cache': true,
    'emitError': true,
    'failOnError': false
  })
)

if (process.env.NODE_ENV === 'production') {
  plugins.push(
    // gzip
    new CompressionWebpackPlugin({
      filename: '[path].gz[query]',
      test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
      threshold: 10240,
      minRatio: 0.8,
      deleteOriginalAssets: false
    })
  )
}

module.exports = {
  outputDir: 'docker/ssm',
  lintOnSave: true,
  configureWebpack: () => {
    const config = {}
    config.plugins = plugins
    config.optimization = {
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            compress: { drop_console: true, drop_debugger: true }
          }
        })
      ]
    }

    if (process.env.NODE_ENV === 'production') {
      config.externals = externals
    }
    if (process.env.NODE_ENV === 'development') {
      // 关闭 host check，方便使用 ngrok 之类的内网转发工具
      config.devServer = {
        disableHostCheck: true
      }
    }
    return config
  },
  css: {
    loaderOptions: {
      /* less: {
        lessOptions: {
          modifyVars: {
            'hack': `true; @import "${vars}"`
          }
        }
      }, */
      scss: {
        additionalData: `@import '~@/assets/style/mixins.scss';`
      },
      postcss: {
        plugins: [
          require('postcss-plugin-px2rem')({
            // px换算：750 * 元素在设计稿中的宽度 / 设计稿基准宽度
            // 37.5 是以375的屏幕宽进行适配
            rootValue: 37.5, // 换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
            // unitPrecision: 5, //允许REM单位增长到的十进制数字。
            // propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
            // propBlackList: [], //黑名单
            exclude: false, // 默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)\/如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
            // selectorBlackList: [], //要忽略并保留为px的选择器
            // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
            // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
            mediaQuery: false, // （布尔值）允许在媒体查询中转换px。
            minPixelValue: 2 // 设置要替换的最小像素值(3px会被转rem)。 默认 0
          })
        ]
      }
    }
  },
  chainWebpack: config => {
    config.resolve.alias
      .set('@api', resolve('src/api'))
    // 判断环境加入模拟数据
    const entry = config.entry('app')
    if (process.env.NODE_ENV !== 'production') {
      /* entry
        .add('@/mock')
        .end() */
    }

    /**
     * 删除懒加载模块的 prefetch preload，降低带宽压力
     * https://cli.vuejs.org/zh/guide/html-and-static-assets.html#prefetch
     * https://cli.vuejs.org/zh/guide/html-and-static-assets.html#preload
     * 而且预渲染时生成的 prefetch 标签是 modern 版本的，低版本浏览器是不需要的
     */
    config.plugins
      .delete('prefetch')
      .delete('preload')
  },
  // 不输出 map 文件
  productionSourceMap: false,
  transpileDependencies,
  devServer: {
    port: 8998
  }
}
